<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <!-- 
        :value="res"  数据影响视图
        @change="res=$event.target.value"  视图影响数据
        数据的双向绑定
       -->
      <!-- 1==下拉列表的双向数据绑定 -->
      <select :value="res" @change="res=$event.target.value">
        <option v-for="item in address">{{item}}</option>
      </select>
      <select v-model="res">
        <option v-for="item in address">{{item}}</option>
      </select>
      <span>{{res}}</span>
      <hr />
      <br /><br /><br />

      <!-- 2==复选框作为开关 -->
      <h3>作为开关</h3>
      <input
        type="checkbox"
        :checked="swi"
        @change="swi=$event.target.checked"
      />
      <input type="checkbox" v-model="swi" />
      <hr />
      <br /><br /><br />

      <!-- 3==复选框多选 -->
      <h3>作为多选</h3>
      <label v-for="item in options" style="margin: 5px">
        <input
          type="checkbox"
          :checked="hobby.includes(item)"
          @change="select(item)"
        />{{item}}
      </label>
      <hr />
      <br /><br /><br />
      <label v-for="item in options" style="margin: 5px">
        <!-- 作为多选使用   checkbox添加value  v-model指向一个数组  -->
        <input type="checkbox" v-model="hobby" :value="item" />{{item}}
      </label>
      <hr />
      <ul>
        <li v-for="(item,index) in hobby">
          {{item}} <button @click="hobby.splice(index,1)">删除</button>
        </li>
      </ul>
      <hr />
      <br /><br /><br />

      <h3>单选按钮组</h3>
      <label v-for="item in sexOptions" style="margin: 5px">
        <input
          type="radio"
          name="sex"
          :checked="item==sexRes"
          @change="$event.target.checked?sexRes=item:null"
        />{{item}}
      </label>
      <hr />
      <br /><br /><br />

      <label v-for="item in sexOptions" style="margin: 5px">
        <input type="radio" :value="item" v-model="sexRes" />{{item}}
      </label>
      <h3>{{sexRes}}</h3>
      <hr />
      <br /><br /><br />

      <h3>文件选择</h3>
      <label>
        <input
          type="file"
          @change="selectFile"
          style="display: none"
          accept="image/*"
        />
        <p>＋</p>
      </label>
      <img style="width: 120px" :src="url" alt="" />
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          address: ["北京", "上海", "广州", "周口"],
          res: "周口",
          swi: true,
          // 多选
          options: ["篮球", "足球", "乒乓球", "唱", "rap", "跳"],
          hobby: ["篮球", "唱", "rap"],
          // 单选
          sexOptions: ["♂", "♀", "未知"],
          sexRes: "♂",
          // 文件预览
          url: "",
        };
      },
      methods: {
        select(item) {
          // 当操作单个checkbox时
          // 根据hobby中是否存在对应值 执行接下来的操作
          let index = this.hobby.indexOf(item);
          if (index == -1) {
            this.hobby.push(item);
          } else {
            this.hobby.splice(index, 1);
          }
        },
        // 文件选择
        selectFile(e) {
          console.log(e.target.files);
          // 获取临时的文件访问地址
          this.url = URL.createObjectURL(e.target.files[0]);
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
